<!--
 * @Description  : 查询框
 * @Author       : zhao
 * @Date         : 2022-07-11 14:38:25
 * @LastEditors  : zhao
 * @LastEditTime : 2023-02-02 16:13:04
-->
<template>
	<div class="search" @keyup.enter="onSubmit('查询')">
		<el-form :inline="true" :model="sData" class="demo-form-inline">
			<template v-for="(i, index) in searchType" :key="index+'search'">

				<el-form-item :label="i.label">
					<template v-if="i.type == 'input'">

						<div class="input">
							<el-input v-model="sData[i.prop]" :placeholder="i.placeholder" size="default" clearable />
						</div>


					</template>


					<el-select v-if="i.type == 'select'" size=" small" v-model="sData[i.prop]"
						:placeholder="i.placeholder" clearable >
						<el-option v-for="item in i.options" :key="item.key" :label="item.value"
							:value="item.key" />
					</el-select>

					<el-date-picker v-if="i.type == 'datePicker'" size=" small" v-model="sData[i.prop]" type="daterange"
						range-separator="-" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
						:start-placeholder="i.placeholder" :end-placeholder="i.placeholder2" clearable />

					<div v-if="i.type == 'inputTwo'" class="inputTwo">
						<el-input v-model="sData[i.prop]" :placeholder="i.placeholder" size="default" clearable /> -
						<el-input v-model="sData[i.prop2]" :placeholder="i.placeholder" size="default" clearable />
					</div>
					<div v-if="i.type == 'mineral'" class="">
						<el-select  size=" small" v-model="sData[i.prop]"
						 filterable
                        allow-create
                        clearable
                        default-first-option
						:placeholder="i.placeholder" 
						 :prop="{ lable: 'key' }">
						<el-option v-for="item in mineralDataOption.value" :key="item.id" :label="item.mineral"
							:value="item.mineral" />
					</el-select>
					</div>

					<div v-if="i.type == 'button'">
						<el-button v-for="but in i.options" :icon="i.icon" size="default" type="primary"
							@click="onSubmit(but.name)">
							{{ but.name }}
						</el-button>
					</div>
				</el-form-item>


			</template>
		</el-form>
	</div>
</template>

<script setup lang='ts'>
import { reactive, toRefs } from 'vue';
import { toRaw } from '@vue/reactivity'
import { useTableInfo } from '/@/stores/ztable'
import { data } from 'dom7';
import { useUserInfo } from '/@/stores/userInfo'
const { searchData, getTableData } = useTableInfo()
let useTableInfos = useTableInfo()
const props = defineProps({
	searchType: Array<any>
})
const { searchType } = toRefs(props)

let sData = <any>reactive(searchData)


const onSubmit = (name: any) => {
	if (name == "查询") {
		const onData = { ...toRaw(sData) }
		const searchTY = <any>toRaw(searchType?.value)
		onData.pageIndex || (onData.pageIndex = 1)
		onData.pageSize || (onData.pageSize = 10)

		const date = searchTY.filter((e: any) => e.prop == "TimeDate")
		if (date.length > 0) {

			delete onData[date[0].value1]
			delete onData[date[0].value2]
		}
		if (onData.TimeDate && onData.TimeDate.length > 0) {
			onData[date[0].value1] = onData.TimeDate[0]
			onData[date[0].value2] = onData.TimeDate[1]
			delete onData.TimeDate
		} else {
			delete onData.TimeDate

		}
		// if (onData.workDegree) {
		// 	if (onData.workDegree == "小于1:100万") {
		// 		onData.workDegree = "1:1500000,1:2000000,1:2500000"
		// 	}
		// 	if (onData.workDegree == "大于1:1万") {
		// 		onData.workDegree = "1:5000,1:2000,1:1000,1:500"
		// 	}

		// }


		useTableInfos.searchData = { ...onData }

		getTableData()
	}

}

const useUserInfos = useUserInfo()
let mineralDataOption = reactive({value:[]})
const mineralData =  async () => {
    const {data} = await useUserInfos.GetArchiveList()

    try {
       mineralDataOption.value = data
    } catch {
        mineralDataOption.value = []
    }
}
mineralData()
</script>
<style lang='scss' scoped>
.el-form-item {
	// width: 250px;
	margin-right: 25px;

	.input {
		width: 230px !important;

	}

	.el-select {
		width: 230px;
	}



	.inputTwo {
		width: 400px;

		.el-input {
			width: 45% !important;

		}
	}

	::v-deep .el-date-editor {
		width: 230px !important;
	}
}
</style>